<template>
  <view class="container">
    <view class="form-group">
      <text class="label">旧密码</text>
      <input class="input" type="password" v-model="oldPassword" />
    </view>
    <view class="form-group">
      <text class="label">新密码</text>
      <input class="input" type="password" v-model="newPassword" />
    </view>
    <view class="form-group">
      <text class="label">确认密码</text>
      <input class="input" type="password" v-model="confirmPassword" />
    </view>
    <button class="submit-button" @click="confirm">确认修改</button>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				oldPassword:null,
				newPassword:null,
				confirmPassword:null,
				correctPassword:null,
				info:null
			}
		},
		mounted(){
			uni.getStorage({
				key:'info',
				success: (res) => {
					let info = JSON.parse(res.data)
					this.correctPassword = info.password
					this.info = info
				}
			})
		},
		methods: {
			confirm:function(){
				if(this.oldPassword != this.correctPassword){
					uni.showToast({
						title:'原密码错误',
						duration:2000,
						icon:'error'
					})
				}else if(this.newPassword != this.confirmPassword){
					uni.showToast({
						title:'新密码不一致',
						duration:2000,
						icon:'error'
					})
				}else{
					uni.request({
						url:'http://localhost:8085/api/employee/update',
						data:{
							user_id:this.info.user_id,
							password:this.newPassword
						},
						method:'POST',
							header : {'content-type':'application/x-www-form-urlencoded'},
						success: (res) => {
							let data = res.data 
							if(data.code === 200){
							uni.showToast({
								title:'修改成功',
								duration:2000,
								icon:'success'
							})}else{
								uni.showToast({
									title:'修改失败',
									duration:2000,
									icon:'error'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
  }

  .submit-button {
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }

  .submit-button:hover {
    background-color: #0051a8;
  }
</style>